<!-- 我的预约的item -->
<template>
	<view class="flex_col background_white" style="padding:16rpx 40rpx;margin-top: 20rpx;" @click="click_reservation">
		<!-- 单据 状态 -->
		<view class="flex_row center">
			<view style="font-size: 24rpx;color: #8D9090;">单据编号：{{reservation.order_num}}</view>
			<view class="flex" />
			<view :style="{'font-size': '24rpx','color':get_status(reservation.status).status_color}">{{get_status(reservation.status).status}}</view>
		</view>
		<!-- 分割线 -->
		<view style="height: 2rpx;background-color: #f5f5f5;width: 670rpx;margin: 16rpx 0;" />
		<!-- 中间的部分 -->
		<view class="flex_row">
			<fl_image mode="widthFix" :src="reservation.picture" height="250" width="200" :compres="true" />
			<view style="width: 20rpx;" />
			<!-- 详情 -->
			<view class="flex flex_col" style="align-items: flex-start;">
				<!-- 走播 title -->

				<view class="flex_row center">
					<view
						style="background-color: black;font-size: 22rpx;color: white;border-radius: 4rpx;padding: 2rpx 6rpx;">
						{{reservation.deliver}}
					</view>
					<view style="width: 10rpx;" />
					<view class="single_line bold" style="font-size: 28rpx;color: black;">{{reservation.title}}</view>
				</view>
				<view style="font-size: 24rpx;color: #8D9090;margin-top: 4rpx;">{{reservation.styles}}</view>
				<view class="flex_row center full_width" style="margin-top: 20rpx;">
					<view style="font-size: 22rpx;color: #5C6668;">直播场次:</view>
					<view class="flex" />
					<view class="iconfont icon_location_grey" style="font-size: 18rpx;color: #5C6668;" />
					<view style="margin-left: 8rpx;font-size: 22rpx;color: #5C6668;">{{reservation.location}}</view>
				</view>
				<!-- 直播场次时间 -->
				<view class="flex_row wrap" style="justify-content: space-between;width: 450rpx;">
					<view v-for="item,index in reservation.times" :key="index">
						<view class="flex_row center"
							style="margin-top: 12rpx;height: 48rpx;width: 218rpx;background-color: #efefef;border-radius: 4rpx;">
							<view style="font-size: 22rpx;color: #00C2C4">{{item.substring(0,5) + "&nbsp&nbsp"}}</view>
							<view style="font-size: 22rpx;color: #5C6668">{{item.substring(6,17)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 2rpx;background-color: #f5f5f5;width: 670rpx;margin: 16rpx 0;" />
		<view class="flex_row center">
			<view class="flex_row baseline">
				<view style="font-size: 20rpx;color: black;">¥</view>
				<view class="bold" style="font-size: 28rpx;color: black;">
					{{format(reservation.min_price) + "~" + format(reservation.max_price)}}
				</view>
			</view>
			<view class="flex" />
			<view style="font-size: 24rpx;color: #8D9090;">已选{{reservation.total}}款</view>
		</view>
		<view style="height: 2rpx;background-color: #f5f5f5;width: 670rpx;margin: 16rpx 0;" />
		<!-- 最下方按钮和待处理时间 -->
		<view class="flex_row center">
			<rich-text v-if="show_left_time" :nodes="nodes"></rich-text>
			<!-- <view>{{nodes}}</view> -->
			<view class="flex" />
			
			<fl_btn @click="click_btn" font_size="26rpx" theme="black" width="190rpx" :enable="get_status(reservation.status).enable" :primary="get_status(reservation.status).primary" :text="get_status(reservation.status).btn_text"/>
			
		</view>
		
	</view>
</template>
<!-- id
order_num==》 202120506175100
status 已排期   20待确认  30待沟通  40已关闭   50带接单  60 已排期
picture  https://.......
deliver 走播
title 	夏日浪漫轻奢少女货盘
styles  夏季少女穿搭推荐
times   [
			"09/29 12:00-18:00",
			"09/29 12:00-18:00",
			"09/29 12:00-18:00",
			"09/29 12:00-18:00"
		]
location 上海市
min_price  100
max_price  300
total   13
left_time  （close_time） 2021-09-17 10:00:24
 -->
<script>
	import moment from "../../utils/moment.js"
	import store from "../../utils/store.js"
	import fl_btn from "../fl_btn.vue"
	import fl_image from "../fl_image.vue"
	import {format_money,is_empty_string} from "../../utils/utils.js"
	export default {
		name: "reservation_item",
		components: {
			fl_image,
			fl_btn,
		},
		data() {
			return {
				nodes:"",
				days: 0,
				hours: 0,
				minutes: 0,
				show_left_time: false, //是否显示剩余时间
			};
		},
		computed:{
			server_time(){
				if(this.reservation.status != 60){
					var server_time = moment(store.state.server_time).format("YYYY-MM-DD HH:mm:ss")
					this.init(server_time)
				}else{
					let year = moment().year()
					var time = year + "-" + this.reservation.times[0].substring(0,11).replace("/","-")
					// console.log( time)
					this.init(moment(time))
				}
				return store.state.server_time
			},
		},
		props: {
			reservation: {
				type: Object,
			},
		},
		created() {
			if(this.reservation.status != 60){
				var server_time = moment(store.state.server_time)
				this.init(server_time)
			}else{
				this.init(moment(this.reservation.times[0]))
			}
			// this.init()
			console.log(this.reservation)
		},
		methods: {
			format(price){
				return format_money(price)
			},
			init(server_time){
				// let server_time = moment(store.state.server_time).format("YYYY-MM-DD HH:mm:ss")
				// console.log("服务器时间",moment(store.state.server_time).format("hh:ss"))
				this.show_left_time = this.reservation.status != 40//(this.reservation.status == 20 || this.reservation.status == 60 || this.reservation.status == 50 || this.reservation.status == 30)
					
				// let server_time = moment(this.reservation.server_time)
				let action_time = moment(this.reservation.action_time)
				var left_time = action_time.diff(server_time)
				if(this.reservation.status == 60){ //如果是已排期 要使用当前时间判断
					left_time = server_time.diff(moment())
				}
				if(left_time < 0){//如果时间小于0 不显示倒计时
					this.show_left_time = false
				}
				// console.log("显示剩余时间")
				var drt = left_time / 1000 / 60  //分钟
				var days = Math.floor(drt / 60 / 24)
				var hours = Math.floor(drt / 60 % 24)
				var minutes = Math.floor(drt % 60)
				var seconds = Math.floor(left_time / 1000 % 60)
				
				var d = days + "" //day
				var h = hours + ""// hour
				var m = minutes + "" //minutes
				var s = seconds + "" //minutes
				if(days < 10){
					d = "0" + days
				}if(hours < 10){
					h = "0" + hours
				}if(minutes < 10){
					m = "0" + minutes
				}if(seconds < 10){
					s = "0" + seconds
				}
				if(this.show_left_time)
				var suf = ""
				var pre = ""
				if(this.reservation.status == 20){
					suf = "后自动确认排期"
				}else if(this.reservation.status == 60){
					pre = "距离开播剩余"
					suf = ""
				}else if(this.reservation.status == 50){
					suf = ""
					pre = "等待商家接单"
				}else if(this.reservation.status == 30){
					suf = "后，预约时间将过期"
				}else{//关闭
					suf = ""
					pre = ""
				}
				var html = ""
				let layout_html = `<div class="flex_row center">`
				let suf_html = `</div>`
				let red = `<div style="font-size: 12px;color: red;">&&</div>`
				let black = `<div style="font-size: 12px;color: black;">&&</div>`
				// if(this.show_left_time)
				// console.log(d + "day" + h + "hour" + m + "minutes" + "seconds=>" + seconds)
				if(parseInt(d) != 0){
					html += (red + "").replace("&&",d) + (black + "").replace("&&","天")
				}
				if(parseInt(h) != 0){
					html += (red + "").replace("&&",h) + (black + "").replace("&&","时")
				}
				if(parseInt(m) != 0){
					html += (red + "").replace("&&",m) + (black + "").replace("&&","分")
				}
				if(parseInt(s) != 0){
					html += (red + "").replace("&&",s) + (black + "").replace("&&","秒")
				}
				if(!is_empty_string(pre)){
					html = (black+"").replace("&&",pre) + html
				}
				html += (black+"").replace("&&",suf)
				html = (layout_html + html + suf_html)
				// console.log(html)
				this.nodes = html
			},
			get_status(code) {
				var result = {}
				var status = ""
				var btn_text = ""
				var enable = true
				var primary = true
				var status_color = 'black'
				switch (code) {
					case 20:
						primary = false
						enable = true
						btn_text = '确认信息'
						status = '待确认'
						status_color = 'red'
						break;
					case 30:
						primary = false
						enable = false
						btn_text = '确认中...'
						status = '待沟通'
						status_color = 'red'
						break;
					case 40:
						primary = true
						enable = true
						btn_text = '查看详情'
						status = '已关闭'
						break;
					case 50:
						primary = true
						enable = true
						btn_text = '取消预约'
						status = '待接单'
						status_color = 'red'
						break;
					case 60:
						primary = true
						enable = true
						btn_text = '查看详情'
						status = '已排期'
						break;
				}
				result.primary = primary
				result.enable = enable
				result.btn_text = btn_text
				result.status = status
				result.status_color = status_color
				return result
			},
			click_reservation() {
				this.$emit("click_reservation", this.reservation)
			},
			click_btn(){
				this.$emit("click_btn", this.reservation)
			},
		},
	}
</script>

<style>
	.black {
		font-size: 22rpx;
		color: black;
	}

	.red {
		font-size: 22rpx;
		color: red;
	}
</style>
